<template>
  <div>
    <n-upload
        ref="uploadImage"
        :action="actionurl"
        list-type="image-card"
        :file-list="filelistvalue"
        :custom-request="httpupload"
        :on-preview="yulan"
        :on-update:file-list="changefile"
        :on-remove="removefile"
    />
    <n-modal
        v-model:show="showModal"
        preset="card"
        class="max-w-3/5 max-h-3/5"
        :title="imgtitle"
        :on-close="guanbi"
    >
      <img :src="previewImageUrl" style="width: 100%" :alt="imgtitle">
    </n-modal>
  </div>
</template>

<script setup name="upimg" lang='ts'>
import http from "@/request/request"
import api from "@/request/api"
import {useMessage} from "naive-ui";
import {ref,defineExpose,defineEmits,defineProps } from "vue"

const message = useMessage()

const uploadImage=ref<any>(null)
const actionurl = ref(import.meta.env.VITE_RES_URL?import.meta.env.VITE_RES_URL + api.upload : "/proxy/" + api.upload)
const filelistvalue = ref([])
// 图片预览
const showModal=ref(false)
const imgtitle=ref("")
const previewImageUrl = ref("")

const emit = defineEmits(["changefile"])
const props = defineProps({
  value:{
    type:String,
    default:"",
  },
})
// 文件列表改变的回调
const changefile=(fileList)=>{
  filelistvalue.value = fileList
}

const yulan=(file)=>{
  previewImageUrl.value = file.url
  imgtitle.value = file.name
  showModal.value = true
}
const guanbi=()=>{
  showModal.value = false
  previewImageUrl.value = ""
  imgtitle.value = ""
}
// 自定义上传
const httpupload=(fileinfo)=>{
  console.log(fileinfo,"看看是什么东西")
  const formData = new FormData()
  formData.append("file",fileinfo.file.file)
  http.upload(formData).then(res=>{
    if(res.status===200 && res.data.code === 0){
      const shuju = res.data.data
      console.log(shuju,"怎么没有url")
      const jieguo = {...fileinfo.file,name:shuju.filename || shuju.id,status:"finished",url:shuju.url,thumbnailUrl:shuju.url}
      delete jieguo.file
      console.log(jieguo,"怎么没有url")
      message.success("上传成功")
      fileinfo.onFinish()
      filelistvalue.value = [jieguo]
      emit("changefile",filelistvalue.value)
    }
  })
}
// 移除图片
const removefile=()=>{
  filelistvalue.value = []
  emit("changefile",filelistvalue.value)
}
const getimgurl=()=>{
  return filelistvalue.value[0].url
}

// 监听区域
watch(()=>props.value,()=>{
  console.log("触发一次watch")
  if(props.value){
    console.log("监听到有值，是：",props.value)
    const namelist  = props.value.split("/")
    filelistvalue.value = [
        {
          id:(1-new Date().getTime()).toString(),
          url:props.value,
          thumbnailUrl:props.value,
          name: namelist[namelist.length-1],
          status:"finished",
        },
    ]
  }
})

const init=()=>{
  uploadImage.value.openOpenFileDialog()
}
defineExpose({getimgurl,filelistvalue,removefile,init})

// 初始化区域
console.log("上传组件初始化，",props.value)
if(props.value){
  console.log("上传组件，不是空的")
  const namelist  = props.value.split("/")
  filelistvalue.value = [
    {
      "id":(1-new Date().getTime()).toString(),
      "url":props.value,
      "thumbnailUrl":props.value,
      "name": namelist[namelist.length-1],
      "status":"finished",
    },
  ]
}


</script>


<style scoped>

</style>
